<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">控制台</el-breadcrumb-item>
            <el-breadcrumb-item>小说管理</el-breadcrumb-item>
            <el-breadcrumb-item>小说仓库</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-form ref="form" label-width="80px" :inline="true">
                <el-form-item>
                    <el-input v-model="name" placeholder="输入昵称、ID搜索" size="small" @keyup.enter="getanimeList"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="getanimeList">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="#">
                </el-table-column>
                <el-table-column
                        prop="coverpic"
                        label="封面"
                        width="220">
                    <template slot-scope="scope">
                        <div class="imaegs">
                            <el-image :src="scope.row.coverpic"></el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="书名">
                </el-table-column>
                <el-table-column
                        prop="author"
                        label="作者">
                </el-table-column>
                <el-table-column
                        prop="allchapter"
                        label="总章节">
                </el-table-column>
                <el-table-column
                        prop="link"
                        label="进度">
                    <template slot-scope="scope">
                        <span v-if="scope.row.iswz == '1'">连载中</span>
                        <span v-if="scope.row.iswz == '2'">已完结</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="属性">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isbg==1">小图</span>
                        <span v-if="scope.row.isbg==2">大图</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="长篇/短篇">
                    <template slot-scope="scope">
                        <span v-if="scope.row.islong==1">长篇</span>
                        <span v-if="scope.row.islong==2">短篇</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="male"
                        label="男频/女频">
                    <template slot-scope="scope">
                        <span v-if="scope.row.issex==1">男频</span>
                        <span v-if="scope.row.issex==2">女频</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="warning" size="small" plain @click="changeClick(scope.row)">上架</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pages.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pages.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pages.total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Comic_Warehouse",
        data() {
            return {
                name: '',
                pages: {
                    total: null,
                    pageNum: 1,
                    pageSize: 10,
                },
                tableData: []
            }
        },
        watch: {
            name() {
                this.getanimeList()
            },
        },
        created() {
            this.getanimeList()
        },
        methods: {
            changeClick(e) {
                console.log(e)
                this.$confirm('确定上架该书籍嘛？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("AdminApi/Anime/animeUpdate", {
                        id: e.id,
                        status: '1'
                    })
                        .then(res => {
                            this.$message.success('上架成功!');
                            this.getanimeList()
                        })
                }).catch(() => {
                    this.$message.info('取消上架');
                });

            },
            handleSizeChange(val) {
                this.pages.pageSize = val
                this.getanimeList()
            },
            handleCurrentChange(val) {
                this.pages.pageNum = val
                this.getanimeList()
            },

            getanimeList() {
                this.$axios.get("AdminApi/Anime/animeList", {
                    btype: '2',
                    p: this.pages.pageNum,
                    perpage: this.pages.pageSize,
                    status: '0',
                    title:this.name,
                })
                    .then(res => {
                        console.log(res)
                        this.tableData = res.data.list
                        this.pages.total = Number(res.data.count)
                    })
            }
        }
    }
</script>

<style scoped>
    .imaegs {
        width: 200px;
        height: 100px;
        overflow: hidden;
        display: block;
    }
</style>